/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import BottomTabNav from './Component/BottomTabNav'
import Welcome from './Page/Welcome'

import CCMain from './Component/Main/CCMain'
import CCShop from './Component/Shop/CCShop'
import CCMore from './Component/More/CCMore'
import CCMine from './Component/Mine/CCMine'

export class Router extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    var page = null
    var props = {
      changeAction: this.props.changeAction,
      changePage: this.props.changePage
    }

    switch (this.props.activePage) {
      case 0: page = React.createElement(CCMain, props); break;
      case 1: page = React.createElement(CCMine, props); break;
      case 2: page = React.createElement(CCShop, props); break;
      case 3: page = React.createElement(CCMore, props); break;
    }
    return (
      <View style={styles.contion}>
        <View style={{ flex: 1 }}>
          {page}
        </View>
        <BottomTabNav index={this.props.activePage} actionChange={global.routerChangeAction}></BottomTabNav>
      </View>
    );
  }
}

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = { activePage: 0, page: "welcome" };
    this.changeAction = this.changeAction.bind(this)
    this.changePage = this.changePage.bind(this)
    global.routerChangePage = this.changePage
    global.routerChangeAction = this.changeAction
  }
  render() {
    var pagelist = {
      welcome: Welcome,
      main: Router
    }
    var Page = pagelist[this.state.page]
    var props = {}
    for (let key in this.state) {
      props[key] = this.state[key]
    }
    props.changeAction = this.changeAction
    props.changePage = this.changePage
    return React.createElement(Page, props)
  }
  changeAction(index) {
    this.setState({
      page: 'main',
      activePage: index
    })
  }
  changePage(pagename) {
    this.setState({
      page: pagename
    })
  }
}

const styles = StyleSheet.create({
  contion: {
    flex: 1,
    flexDirection: 'column'
  }
});
